<template>
  <div class="c-bg-sgray">
    <div class="c-bg-white c-ph24 c-pf c-maxw640 c-p-l0 c-p-r0 c-mlr-auto c-pz10">
      <div class="c-flex-row c-aligni-center c-justify-sb c-pv24" @click="changeCity(1)">
        <div class="c-fc-xblack  c-fs24 c-lh34">
          <span class="iconfont c-mr12">&#xe8fe;</span>
          <span v-if="cityInfo">{{cityInfo.name}}</span>
          <span v-else>请选择提取点</span>
        </div>
        <div class="c-flex-row c-aligni-center c-fc-sblack c-fs20 c-lh28">切换城市<span class="iconfont c-fc-sgray c-fs20 c-ml10">&#xe908;</span></div>
      </div>
    </div>
    <div class="c-ph24 c-pt80">
      <div v-for="(item, index) in dataList" :key="index" class="c-bg-white c-br8 c-mt20 c-ph16 c-p" :class="modId == item.modId ? 'theme-bd1 current' : 'c-bd1-white'" @click="changeModId(item)">
        <div class="c-flex-row c-aligni-center c-bd-b1 c-pv16 c-justify-sb">
          <div class="c-lh34 c-text-ellipsis1 c-fs24 c-fc-xblack c-maxw380">{{item.modName}}</div>
          <div class="c-lh28 c-fs20 c-fc-sblack">{{!item.distance ? '未知距离' : '距您'+ item.distance +'km'}}</div>
        </div>
        <div class="c-pv16">
          <div class="c-fs20 c-lh28 c-mb20 c-flex-row c-aligni-start">
            <span class="c-ww104">提货地址：</span><span class="c-fc-sblack c-flex-grow1 c-w0 c-text-ellipsis2">{{item.address}}</span>
          </div>
          <div class="c-fs20 c-lh28 c-mb20 c-flex-row c-aligni-center">
            <span class="c-ww104">营业时间：</span>
            <div class="c-fc-sblack c-flex-grow1 c-text-ellipsis2 c-flex-row c-aligni-center">
              <span class="c-mr4">{{item.openDate}}</span>
              <span>{{showCycletime(item.openStartAt, item.openEndAt)}}</span>
            </div>
          </div>
          <div class="c-fs20 c-lh28 c-flex-row c-aligni-center">
            <span class="c-ww104">联系电话：</span><span class="c-fc-sblack c-flex-grow1 c-text-ellipsis2">{{item.contactMobile}}</span>
          </div>
        </div>
        <div class="c-pa c-p-r0 c-p-b0 select theme-bg-gradient" v-show="modId == item.modId"><span class="iconfont c-fc-white c-fs20 c-fc-white c-pa c-p-b12 c-p-r6">&#xe82c;</span></div>
      </div>
    </div>
    <loading-status-tem :dataStatus="dataStatus" :noDataText="'非常抱歉，您当前所在城市没有自提点哦~'" noneImage="https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/mall/location.png">
      <p class="c-textAlign-c c-fc-gray c-fs12 c-lh24" v-if="dataStatus == 'NO_DATA'"></p>
      <div class="c-flex-row c-aligni-center c-justify-center c-w100 c-mt60">
        <div class="c-fs24 c-lh34 theme-fc c-pv16 c-ph52 c-mr20 c-br36 theme-bd2" @click="goShopSettlment" v-if="isMallExpressDeliver == 1">选择物流配送</div>
        <div class="c-fs24 c-lh34 c-fc-white theme-bg c-pv16 c-ph52 c-br36" @click="changeCity(1)">选择其他城市</div>
      </div>
    </loading-status-tem>
    <open-modal :openModal='showChange' @closeModal='changeCity(0)'>
      <div class="c-ph24 c-bg-white c-pt24 c-pb20 c-p">
        <span class="iconfont c-fs20 c-pa c-p-r24 c-p-t32" @click="changeCity(0)">&#xe8fd;</span>
        <p class="c-fs24 c-lh36 c-fc-xblack c-textAlign-c">切换城市</p>
        <p class="c-fs20 c-lh38 c-fc-gray c-textAlign-c c-mt8 c-mb10">以下为所有支持自提的城市</p>
        <div class="cityBox">
          <div v-for="(item, index) in cityList" :key="index" class="c-bd-b1 c-fc-xblack c-fs24 c-lh34 c-pv20" @click="ChangeName(item.name)">{{item.name}}</div>
        </div>
      </div>
    </open-modal>
  </div>
</template>

<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import OpenModal from "@/components/templates/common/openModal.vue";
import { utilJs } from "@/utils/common.js";
let pageSize = 10;
let goodType = 1; // 1时商城商品、2是积分兑换商品
export default {
  name: "OfflineSiteList",
  components: {
    loadingStatusTem,
    OpenModal
  },
  props: {
    fromPage:{
      type:String,
      default:'SHOP'
    },
    offLineSiteInfo:{
      type:Object,
      default:() => {
        return null
      },
    }
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      pageIndex: 1,
      dataStatus: 'HAS_MORE_DATA',
      dataList: null,
      cityId: '', //当前自提城市id
      userXY: [],
      cityList: null,
      cityInfo: null,
      showChange: false,
      isCityChange: false,
      modId: '', //自提点id
      isMallExpressDeliver: -1
    }
  },
  created() {
    if (this.fromPage != 'SHOP') {
      return;
    }
    utilJs.appShare(this);
  },
  mounted() {
  },
  methods: {
    goShopSettlment() {
      if (this.fromPage == 'SHOP') {
        this.$router.back(-1);
        return;
      }
      this.$emit('closeOffline')
    },
    getList() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      let infoUserXY = this.offLineSiteInfo && this.offLineSiteInfo.userLat && this.offLineSiteInfo.userLng ? [this.offLineSiteInfo.userLat * 1, this.offLineSiteInfo.userLng * 1] : '';
      let queryUserXY = this.$route.query.userLat && this.$route.query.userLng ? [this.$route.query.userLat * 1, this.$route.query.userLng * 1] : '';
      this.userXY = queryUserXY || infoUserXY || [];
      let url = `${global.apiurl}goods/getOfflineSiteList`;
      let data = {
        cityId: this.isCityChange == false ? this.cityId : this.cityInfo.cityId,
        userLat: this.userXY && this.userXY.length == 2 ? this.userXY[0] : '',
        userLng: this.userXY && this.userXY.length == 2 ? this.userXY[1] : '',
        page: this.pageIndex,
        pageSize: pageSize,
        mgId: JSON.parse(localStorage.getItem('shopMgId')),
        goodType: goodType
      }
      utilJs.postMethod(url, data, res => {
        if (this.pageIndex == 1) {
          this.dataList = res.data;
        } else {
          this.dataList = [...this.dataList, ...res.data];
        }
        if (res.data && (res.data.length < pageSize)) {
          this.dataStatus = this.pageIndex == 1 && res.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
        } else {
          this.dataStatus = 'HAS_MORE_DATA';
          this.pageIndex++;
        }
      }, failRes => {
        this.dataStatus = 'DATA_ERROR';
      });
    },
    // 缓存用户自提点
    setUsersOffline(modId) {
      let data = {
        modId: modId,
        mgId: JSON.parse(localStorage.getItem('shopMgId'))
      }
      utilJs.postMethod(`${global.apiurl}goods/setUsersOffline`, data, (res) => {
        console.log(res);
      })
    },
    //改变自提点
    changeModId(item) {
      if (this.moId != item.modId) {
        localStorage.setItem('mod', JSON.stringify(item));
        this.modId = (JSON.parse(localStorage.getItem('mod'))).modId;
      }
      this.setUsersOffline(this.modId);
      if (this.fromPage == 'SHOP') {
        this.$router.back(-1);
        return;
      }
      this.$emit('closeOffline');
    },
    //获取自提城市id/name
    getCityList() {
      let that = this;
      let urlOffline = `${global.apiurl}goods/getOfflineCity`;
      let data = {
        mgId: JSON.parse(localStorage.getItem('shopMgId')),
        goodType: goodType
      };
      utilJs.postMethod(urlOffline, data, (res) => {
        that.cityList = res ? res : [];
        let list = res ? res : [];
        let cityInfo = list.filter((item) => {
          return item.cityId == that.cityId;
        })
        that.cityInfo = cityInfo && cityInfo.length > 0 ? cityInfo[0] : '';
      })
    },
    //切换城市信息
    changeCityInfo(name) {
      let list = this.cityList;
      let cityInfo = list.filter((item) => {
        return item.name == name;
      })
      this.cityInfo = cityInfo && cityInfo.length > 0 ? cityInfo[0] : '';
    },
    //切换城市名
    ChangeName(name) {
      this.cityInfo = [];
      this.changeCityInfo(name);
      this.isCityChange = true;
      this.showChange = false;
      this.dataList = null;
      this.pageIndex = 1;
      this.getList();
    },
    //切换弹窗是否显示
    changeCity(type) {
      this.showChange = type == 1 ? true : false;
    },
    //时间转换
    showCycletime(start, end) {
      let stArr = start.split(':');
      let enArr = end.split(':');
      return `${stArr[0]}:${stArr[1]}-${enArr[0]}:${enArr[1]}`
    },
    //分享
    wechatShare: function () {
      let title = "首页";
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareUrl = window.location.href.split("#")[0] + '&refereeId=' + localStorage.getItem("userId");
      let shareDesc = "点击查看详情";
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      let title = "首页";
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareUrl = window.location.href.split("#")[0] + '&refereeId=' + localStorage.getItem("userId");
      let shareDesc = "点击查看详情";
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    },
    //下滑获取更多
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.dataList != null && this.dataList.length > 0) {
          this.getList();
        }
      });
    },
  },
  activated() {
     if (this.fromPage == 'SHOP') {
       setDocumentTitle("选择自提点");
     }
    this.pageIndex = 1;
    this.isLoading = false;
    this.showChange = false;
    this.isCityChange = false;
    this.dataList = null;
    let infoCityId = this.offLineSiteInfo && this.offLineSiteInfo.cityId;
    this.cityId = this.$route.query.cityId || infoCityId;
    goodType = Number(this.$route.query.goodType) || (this.offLineSiteInfo && this.offLineSiteInfo.goodType ? this.offLineSiteInfo.goodType : 1);
    if (JSON.parse(localStorage.getItem('mod'))) {
      let mod = JSON.parse(localStorage.getItem('mod'));
      this.modId = mod.modId;
    } else {
      this.modId = '';
    }
     let infoDeliver = this.offLineSiteInfo && this.offLineSiteInfo.isMallExpressDeliver;
    this.isMallExpressDeliver = this.$route.query.isMallExpressDeliver || infoDeliver || -1;
    this.getList();
    this.getCityList();
     if (this.fromPage == 'SHOP') {
      this.wechatShare();
      window.addEventListener('scroll', this.windowScrollFunction);
    }
  },
  deactivated() {
    window.removeEventListener('scroll', this.windowScrollFunction);
  },
  beforeRouteLeave(to, from, next) {
    if (!['/mall/shopSettlement/shopSettlement'].includes(to.path)) {
      //直播领奖跳转
      this.$store.commit("live/setPrizeInfo", null);
    }
    next();
  }
};
</script>

<style scoped>
.c-maxw380 {
  max-width: 9.05rem;
}
.cityBox {
  max-height: 6.8rem;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}
.current .select {
  position: absolute;
  content: "";
  height: 1.6rem;
  width: 1.6rem;
}
.current .select::before {
    position: absolute;
    content: "";
    border-top: 1.62rem solid #fff;
    right: 0;
    bottom: 0;
    border-bottom: 0rem solid transparent;
    border-right: 1.62rem solid transparent;
}
.c-ww104 {
  width: 2.6rem;
}
</style>
